<div *ngIf="criteria">
    <div *ngFor="let category of criteria" class="mb-3">
        <h5 *ngIf="category.key != 'None'">{{ category.key }}</h5>
        <div *ngFor="let item of category.items" class="card py-2 px-3 shadow mb-3" [ngClass]="{'bg-product-color': item.enabled, 'bg-light-grey': !item.enabled}">
            <a *ngIf="item.enabled" class="text-none" [routerLink]="['/admin', 'reports',  type, 'filter', filterId, {outlets: {criteria: [false, 'level1', lvl1, 'level2', lvl2, 'level3', item.id, 'shortName', lvl2ShortName, 'name', item.name]}}]">{{ item.name }}</a>
            <div *ngIf="!item.enabled" class="d-flex text-dark-grey">
                <span class="mr-auto">{{ item.name }}</span>
                <i class="ti-lock ml-auto"></i>
            </div>
        </div>
    </div>
</div>